<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>农作物详情</title>
    <!-- <meta charset="utf-8"/> -->
    <!-- 优先使用 IE 最新版本和 Chrome -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <!-- 页面描述 -->
    <meta name="description" content="遇农" />
    <!-- 页面关键词 -->
    <meta name="keywords" content="遇农" />
    <!-- 网页作者 -->
    <meta name="author" content="" />
    <!-- 搜索引擎抓取 -->
    <meta name="robots" content="all" />
    <!-- 为移动设备添加 viewport -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- `width=device-width` 会导致 iPhone 5 添加到主屏后以 WebApp 全屏模式打开页面时出现黑边 http://bigc.at/ios-webapp-viewport-meta.orz -->
    <!-- iOS 设备 begin -->
    <meta name="apple-mobile-web-app-title" content="遇农" />
    <!-- 添加到主屏后的标题（iOS 6 新增） -->
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <!-- 是否启用 WebApp 全屏模式，删除苹果默认的工具栏和菜单栏 -->

    <meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL">
    <!-- 添加智能 App 广告条 Smart App Banner（iOS 6+ Safari） -->
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <!-- 设置苹果工具栏颜色 -->
    <meta name="format-detection" content="telphone=no, email=no" />
    <!-- 忽略页面中的数字识别为电话，忽略email识别 -->
    <!-- 启用360浏览器的极速模式(webkit) -->
    <meta name="renderer" content="webkit">
    <!-- 避免IE使用兼容模式 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- 不让百度转码 -->
    <meta http-equiv="Cache-Control" content="no-siteapp" />
    <!-- 针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑莓 -->
    <meta name="HandheldFriendly" content="true">
    <!-- 微软的老式浏览器 -->
    <meta name="MobileOptimized" content="320">
    <!-- uc强制竖屏 -->
    <meta name="screen-orientation" content="portrait">
    <!-- QQ强制竖屏 -->
    <meta name="x5-orientation" content="portrait">
    <!-- UC强制全屏 -->
    <meta name="full-screen" content="yes">
    <!-- QQ强制全屏 -->
    <meta name="x5-fullscreen" content="true">
    <!-- UC应用模式 -->
    <meta name="browsermode" content="application">
    <!-- QQ应用模式 -->
    <meta name="x5-page-mode" content="app">
    <link rel="stylesheet" type="text/css" href="css/common.css" />
    <link rel="stylesheet" type="text/css" href="css/crop-details.css">

    <!-- 	/*ie9兼容h5标签*/
	/*在 IE 浏览器的版本小于 IE9 时将读取 html5.js 文件，并解析它*/
	/*并且要放到head标签中*/ -->
    <!--[if lt IE 9]>
	    <script src="http://cdn.static.runoob.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
	<![endif]-->
</head>

<body>
    <!-- 头部区域 -->
    <header>

        <!-- 顶部导航 -->
        <div class="top-nav">

            <div class="logo"><img src="img/logo.png" alt=""/></div>

            <!--   <div class="date-choice" title="选择时间,查看选择作物种植温度">

                    <form name="date">

                      <select name="year" onchange="selectYear(this.value)">

                        <option value="">选择 年</option>

                      </select>

                      <select name="month" onchange="selectMonth(this.value)">

                        <option value="">选择 月</option>

                      </select>

                      <select name="day">

                        <option value="">选择 日</option>

                      </select>

                    </form>

                </div> -->
            <!-- <span id="showNav" class="show-nav">三</span> -->

            <ul class="nav">

                <li><a href="index.html">首页</a></li>

                <li><a href="information.html">资讯</a></li>

                <li><a href="crop-details.html" class="top-nav-active">作物信息</a></li>

                <li><a href="planting search.html">种植技术</a></li>

                <li><a href="login.html">登陆</a></li>



            </ul>

        </div>

    </header>

    <!-- 中间内容部分 -->
    <section id="large_container">


        <div class="crop-details-item">
            <div class="crop-details-item-top">
                <img class="leftpic-max" src="img/crop/玉米1.png" />
                <img class="rightpic" src="img/crop/玉米3.png" />
                <img class="leftpic-mid" src="img/crop/玉米2.png" />
                <span class="title">玉米</span>
                <div class="briefIntroduction">
                    玉米，原名：玉蜀黍，别名：罗谷・棒子、包谷、玉茭、苞米、珍珠米、苞芦、大芦粟，潮汕话：幼美仁，禾本科、玉蜀黍属一年生高大草本。秆直立，通常不分枝，基部各节具气生支柱根。</div>
            </div>
            <div class="describe">
                <div class="left">
                    <div class="grow">
                        <span class="grow-title">生长方式</span>
                         </div>

                    <div class="other">
                       
                    </div>
                </div>

                <div class="right">
                    <div class="plant">
                        <span class="plant-title">种植</span>
                    </div>
                </div>

            </div>


        </div>


        <div class="crop-details-item">
            <div class="crop-details-item-top">
                <img class="leftpic-max" src="img/crop/玉米1.png" />
                <img class="rightpic" src="img/crop/玉米3.png" />
                <img class="leftpic-mid" src="img/crop/玉米2.png" />
                <span class="title">玉米</span>
                <div class="briefIntroduction">
                    玉米，原名：玉蜀黍，别名：罗谷・棒子、包谷、玉茭、苞米、珍珠米、苞芦、大芦粟，潮汕话：幼美仁，禾本科、玉蜀黍属一年生高大草本。秆直立，通常不分枝，基部各节具气生支柱根。</div>
            </div>
            <div class="describe">
                <div class="left">
                    <div class="grow">
                        <span class="grow-title">生长方式</span>
                     </div>

                    <div class="other">
                        
                    </div>
                </div>

                <div class="right">
                    <div class="plant">
                        <span class="plant-title">种植</span>

                    </div>
                </div>

            </div>


        </div>


        <div class="crop-details-item">
            <div class="crop-details-item-top">
                <img class="leftpic-max" src="img/crop/玉米1.png" />
                <img class="rightpic" src="img/crop/玉米3.png" />
                <img class="leftpic-mid" src="img/crop/玉米2.png" />
                <span class="title">玉米</span>
                <div class="briefIntroduction">
                        玉米，原名：玉蜀黍，别名：罗谷・棒子、包谷、玉茭、苞米、珍珠米、苞芦、大芦粟，潮汕话：幼美仁，禾本科、玉蜀黍属一年生高大草本。秆直立，通常不分枝，基部各节具气生支柱根。</div>
                </div>
            <div class="describe">
                <div class="left">
                    <div class="grow">
                        <span class="grow-title">生长方式</span>
                        </div>

                    <div class="other">
                    </div>
                </div>
                <div class="right">
                    <div class="plant">
                        <span class="plant-title">种植</span>
                       
                    </div>
                </div>
            </div>
        </div>

        <a id="more_load" class="more-information">更多详情</a>
        <!-- 页脚 -->
        <footer>
            <div class="footer-logo">
                    <img src="img/logo2.png" alt=""/>
            </div>

            <div class="footer-title">遇农</div>
        </footer>
    </section>






    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
    </script>
    <!-- <script type="text/javascript" src="js/verificationCode.js"></script> -->
    <script>
        $.ajax({
            url: 'crop.php',
            type: 'get',
            dataType: 'json',
            data: {
                year: 2018,
            },
            success: function (data) {
                //console.log(data);
                for(var k in data)
                {
                    
                    $(".title:eq("+k+")").html(data[k].name);
                    $(".briefIntroduction:eq("+k+")").html(data[k].brief);
                    $(".grow:eq("+k+")").append(data[k].grownhabit);
                    $(".plant:eq("+k+")").append(data[k].skill);
                    if(data[k].efficacy!=""){
                    $(".other:eq("+k+")").append('<span class="other-title">营养价值</span>')
                    $(".other:eq("+k+")").append(data[k].efficacy);
                    }
                    if(data[k].worth!=""){
                    $(".other:eq("+k+")").append('<span class="other-title">功效</span>')
                    $(".other:eq("+k+")").append(data[k].worth);
                    }
                }
                
            }
        });
        //方法 根据类名获取div数量
        function getElementsByClassName(n) {
        var classElements = [],allElements = document.getElementsByTagName('div');//所有div
        for (var i=0; i< allElements.length; i++ )
        {
        if (allElements[i].className == n ) {
            classElements[classElements.length] = allElements[i];
            }
        }
        return classElements.length;
        }

        $('#more_load').click(function(){
                //获取当前有多个div
				var num = getElementsByClassName("crop-details-item");
				
				$.ajax({
                    url:'loadmore.php',
                    type:'GET',
                    dataType:'json',
                    data:{
                        divcount:num
                    },
                    success:function(data){
                        //console.log(data);
                        //追加三个作物框架
                        for(var k=0;k<3;k++){
                        $(
                            "<div class='crop-details-item'>"
                                +"<div class='crop-details-item-top'>"
                                +  "<img class='leftpic-max' src='img/crop/玉米1.png' />"
                                +  "<img class='rightpic' src='img/crop/玉米3.png' />"
                                + "<img class='leftpic-mid' src='img/crop/玉米2.png' />"
                                +  "<span class='title'></span>"
                                + "<div class='briefIntroduction'>"
                                + "</div>"
                                +"<div class='describe'>"
                                +    "<div class='left'>"
                                +        "<div class='grow'>"
                                +           "<span class='grow-title'>生长方式</span>"
                                +            "</div>"
                                +        "<div class='other'>"
                                +        "</div>"
                                +    "</div>"
                                +    "<div class='right'>"
                                +       "<div class='plant'>"
                                +            "<span class='plant-title'>种植</span>"
                                        
                                +        "</div>"
                                +    "</div>"
                               + "</div>"
                            +"</div>").insertBefore($("#more_load"));
                        }
                        //修改值
                        for(var count in data)
                        {
                            k=eval(count)+eval(num);
                            $(".title:eq("+k+")").html(data[count].name);
                            $(".briefIntroduction:eq("+k+")").html(data[count].brief);
                            $(".grow:eq("+k+")").append(data[count].grownhabit);
                            $(".plant:eq("+k+")").append(data[count].skill);
                            if(data[count].efficacy!=""){
                            $(".other:eq("+k+")").append('<span class="other-title">营养价值</span>')
                            $(".other:eq("+k+")").append(data[count].efficacy);
                            }
                            if(data[count].worth!=""){
                            $(".other:eq("+k+")").append('<span class="other-title">功效</span>')
                            $(".other:eq("+k+")").append(data[count].worth);
                            }else{
                            $(".other:eq("+k+")").append('<span class="other-title">分布</span>')
                            $(".other:eq("+k+")").append(data[count].distribution);
                            }
                        }
                    }
                });
        });
    </script>
</body>

</html>